<template>
    <div class="Cpsylb-vue">

        <el-row :gutter="24">
            <el-col :span="24">
                <h2 class="section-title">溯源数据分析</h2>
            </el-col>
            <el-col :span="24">
                <el-row>
                    <el-col :span="12">
                        <div class="echarphoto" ref="echarleft">
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="echarphoto" ref="echarright">

                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {

            option1: {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 10
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ]
                    }
                ]
            },
            option2: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: [10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            }




        }
    },
    methods: {
        create_echarleft() {
            const echarleftbl = echarts.init(this.$refs.echarleft)
            echarleftbl.setOption(this.option1)
        },
        create_echarright() {
            const echarright = echarts.init(this.$refs.echarright)
            echarright.setOption(this.option2)
        }

    },
    mounted() {
        this.create_echarleft()
        this.create_echarright()
    },
}
</script>

<style scoped>
.Cpsylb-vue {
    min-height: 200px;
    background-color: #ffffff;
    padding: 30px 60px;
    /* 与父容器保持间距 */
    /* overflow-x: hidden; */
}

.echarphoto {
    height: 500px;
}
</style>